'use client'

import type React from 'react'
import { ImageIcon, Upload } from 'lucide-react'
import { useCallback } from 'react'
import { Card } from '@/components/ui/card'

interface ImageUploadProps {
  onImageUpload: (imageData: string) => void
}

export default function ImageUpload({ onImageUpload }: ImageUploadProps) {
  const handleFileChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const file = e.target.files?.[0]
      if (file && file.type.startsWith('image/')) {
        const reader = new FileReader()
        reader.onload = (event) => {
          const imageData = event.target?.result as string
          onImageUpload(imageData)
        }
        reader.readAsDataURL(file)
      }
    },
    [onImageUpload],
  )

  const handleDrop = useCallback(
    (e: React.DragEvent<HTMLDivElement>) => {
      e.preventDefault()
      const file = e.dataTransfer.files?.[0]
      if (file && file.type.startsWith('image/')) {
        const reader = new FileReader()
        reader.onload = (event) => {
          const imageData = event.target?.result as string
          onImageUpload(imageData)
        }
        reader.readAsDataURL(file)
      }
    },
    [onImageUpload],
  )

  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
  }, [])

  return (
    <Card
      className="border-2 border-dashed border-border hover:border-primary/50 transition-colors bg-card"
      onDrop={handleDrop}
      onDragOver={handleDragOver}
    >
      <label className="cursor-pointer block">
        <input type="file" accept="image/*" onChange={handleFileChange} className="hidden" />
        <div className="p-12 text-center space-y-4">
          <div className="mx-auto w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center">
            <Upload className="h-8 w-8 text-primary" />
          </div>
          <div className="space-y-2">
            <h3 className="text-xl font-semibold text-foreground">Upload an image to analyze</h3>
            <p className="text-sm text-muted-foreground max-w-sm mx-auto">
              Drag and drop your image here, or click to browse. We'll automatically detect text and visual layers.
            </p>
          </div>
          <div className="flex items-center justify-center gap-2 text-xs text-muted-foreground">
            <ImageIcon className="h-4 w-4" />
            <span>Supports JPG, PNG, WebP</span>
          </div>
        </div>
      </label>
    </Card>
  )
}
